<script lang="ts" setup>
import { reactive, Ref, ref } from "vue";
import { IModelFormExpose } from "@whjxtech/jxtech-component";
import userDeptServiceApi from "@/api/modules/org/bean/user-dept";
// import BaseCustomUserDeptServiceApi from '/@/api/base/bean/bese-custom-user-dept'
import UnitSelectInput from "@/views/org/unit/component/unit-select-input.vue";
import userBeanServiceApi from "@/api/modules/org/bean/user-bean";
import { AxiosResponse } from "axios";
import { useRoute } from "vue-router";
const route = useRoute();
//定义事件
const emits = defineEmits<{
  (e: "save-success", data: any, res: any): void; //保存成功回调
}>();

const props = defineProps({
  userDeptId: String,
  userId: String
});

//model-form ref对象
const JxtechModelFormRef = ref();

//表单数据
const UserDeptFormData: Ref<any> = ref({
  userDeptId: props.userDeptId
});

//定义必填校验规则
const rules = {
  unitName: [{ required: true, message: "请选择部门", trigger: "blur" }],
  userType: [{ required: true, message: "请选择用户类型", trigger: "change" }],
  orderNum: [{ type: "number", message: "请输入数字类型的值", trigger: "blur" }]
};

//组件对象
const UserDeptFormState = reactive({
  primaryKey: "userDeptId",
  getJxtechModelFormExpose: (): IModelFormExpose => {
    return JxtechModelFormRef.value as IModelFormExpose;
  },
  /**新增成功 */
  onSaveSuccess: (formData: any, res: any) => {
    emits("save-success", formData, res);
  },

  // 自定义更新
  saveUpdateFunction: (bean: any) => {
    return userDeptServiceApi.saveUpdate(bean);
  },

  // 自定义新增
  saveInsertFunction: (bean: any) => {
    bean.orgId = route.query.orgId;
    return userDeptServiceApi.saveInsert(bean);
  },

  callback: {
    preAdd: (formData: any) => {
      formData.userId = props.userId;
    }
  }
});

//对外提供方法
defineExpose({
  save: () => JxtechModelFormRef.value.save()
});
</script>
<template>
  <jxtech-model-form
    ref="JxtechModelFormRef"
    :service-api="userDeptServiceApi"
    :primary-key="UserDeptFormState.primaryKey"
    :form-data="UserDeptFormData"
    :rules="rules"
    :save-update-function="UserDeptFormState.saveUpdateFunction"
    :save-insert-function="UserDeptFormState.saveInsertFunction"
    :callback="UserDeptFormState.callback"
    @save-success="UserDeptFormState.onSaveSuccess"
  >
    <el-row>
      <el-col :span="21" :offset="1">
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="部门描述" prop="unitName">
              <unit-select-input
                v-model:unitId="UserDeptFormData.deptId"
                v-model:unitName="UserDeptFormData.unitName"
              ></unit-select-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <jxtech-model-form-item label="用户类型" prop="userType">
              <JxtechDictionarySelectExt
                placeholder="请选用户类型"
                code-item-id="USER_TYPE"
                v-model="UserDeptFormData.userType"
              ></JxtechDictionarySelectExt>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <jxtech-model-form-item label="主要部门" prop="main">
              <el-radio-group v-model="UserDeptFormData.main">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <jxtech-model-form-item label="在部门序号" prop="orderNum">
              <el-input v-model.number="UserDeptFormData.orderNum"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </jxtech-model-form>
</template>
